<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/tree-div.css"/>
	</head>
	<style>
		.tree{
			width: 300px;
			height: 100vh;
			border: 1px solid black;
		}
	</style>
	<body>
		<div class="tree" id="tree">
			<div id="div"></div>
		</div>
		
		<script>
			const list=[{'name':'李四','child':[{'name':'王五'},{'name':'张三','child':[{'name':'王五'},{'name':'张三','child':[{'name':'王五'},{'name':'张三'}]}]}]},{'name':'王五','child':[{'name':'王五'},{'name':'张三'}]}]
			let div=document.getElementById('div');
			
			function generateNestedList(data,field,level,callback) {
			  let treeUl = document.createElement('div');
			  treeUl.classList.add('tree-ul');
			
			  if (level > 0) {
			    treeUl.classList.add('no-expand');
			  }
			 
			  data.forEach(item => {
			    let treeLi = document.createElement('div');
			    treeLi.classList.add('tree-li');
			
			    let treeLiInfo = document.createElement('div');
			    treeLiInfo.classList.add('tree-li-info');
			    treeLiInfo.setAttribute('data-level', level);
				
				treeLiInfo.addEventListener("click", function(event) {
					callback(item,level)
				})
			
			    if (item.child && item.child.length > 0) {
			      let imgA = document.createElement('a');
			      imgA.classList.add('img-a');
			      imgA.classList.add('no-expand-img');
			      treeLiInfo.appendChild(imgA);
			    }
			    let nameA = document.createElement('a');
			    nameA.textContent = item[field];
			    treeLiInfo.appendChild(nameA);
			    treeLi.appendChild(treeLiInfo);
			    if (item.child && item.child.length > 0) {
			        let childTreeUl = generateNestedList(item.child,field, level + 1,callback);
			        treeLi.appendChild(childTreeUl);
			    }
			    treeUl.appendChild(treeLi);
			  });
			
			  return treeUl;
			}
			
			// function generateNestedList(data,level) {
			//   let result='';
			//   if(level>0){
			// 	   result+= '<div class="tree-ul no-expand">';
			//   }else{
			// 	   result+= '<div class="tree-ul ">';
			//   }
			 
			//   data.forEach(item => {
			//     result += '<div class="tree-li">';
			// 	result += '<div class="tree-li-info" data-level='+level+'>';
			// 	if (item.child && item.child.length > 0) {
			// 		result+='	<a class="img-a no-expand-img"></a>';
			// 	}
			// 	// result += '		<input type="checkbox" />'
			// 	result += '		<a>'+item.name+'</a>'
			// 	result += '</div>';
			// 	if (item.child && item.child.length > 0) {
			// 		 result += generateNestedList(item.child,level+1);
			// 	}
			//     result += '</div>';
			//   });
			
			//   result += '</div>';
			//   return result;
			// }
			
			function clickNode(item,level){
				console.log('点击了',item,'层级是',level)
			}
			
			//开始渲染
			const nestedList = generateNestedList(list,'name',0,clickNode);
			div.appendChild(nestedList);
			
			const listItem = document.querySelectorAll(".img-a");
			
			listItem.forEach(function(item) {
			  item.addEventListener("click", function(event) {
					event.stopPropagation();
					if(item.classList.contains("no-expand-img")){
						item.classList.remove("no-expand-img");
						item.classList.add("expand-img")
					}else{
						item.classList.remove("expand-img");
						item.classList.add("no-expand-img")
					}
					expand(item);
			  });
			});
			
			
			function expand(e){
				let node=e.parentNode.parentNode;
				const childNodes = Array.from(node.childNodes);
				childNodes.forEach(node => {
					if(node.classList.contains('tree-ul')){
						if(node.classList.contains("no-expand")){
							node.classList.remove("no-expand");
							node.classList.add("expand")
						}else{
							node.classList.remove("expand");
							node.classList.add("no-expand")
						}
					}
				}); 	
			}
			
			
			const liItemsDiv = document.querySelectorAll('.tree-li-info');
			
			// 为每个 <li> 元素添加事件监听器
			liItemsDiv.forEach((div) => {
			  div.addEventListener('click', function(event) {
				// 移除所有的 selected 类名
			    liItemsDiv.forEach((item) => {
			      item.classList.remove('selected');
			    });
				
				div.classList.add('selected');
			  });
			});
			
	
			
		</script>
	</body>
</html>